<template>
  <div class="table-attrbute-action">
    <div v-for="(data,index) in value" :key="index">
      <el-form-item label="操作名称">
        <el-input v-model="data.label" placeholder="请输入操作名称"></el-input>
      </el-form-item>
      <el-form-item label="操作目标" class="_action-type">
        <el-radio-group v-model="data.callback.type">
          <el-radio label="message" border>消息提示</el-radio>
          <el-radio label="alert" border>交互模态框</el-radio>
          <el-radio label="target" border>目标跳转</el-radio>
          <el-radio label="default" border>异步交互</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="操作主题">
        <el-radio-group v-model="data.type">
          <el-radio label="default" border>默认</el-radio >
          <el-radio label="primary" border>主要</el-radio>
          <el-radio label="success" border>成功</el-radio>
          <el-radio label="info" border>信息</el-radio>
          <el-radio label="warning" border>警告</el-radio>
          <el-radio label="danger" border>危险</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 消息提示   删除 -->
      <template v-if="data.callback.type == 'message'">
        <el-form-item label="API接口"></el-form-item>
        <el-form-item label="接口参数"></el-form-item>
        <el-form-item label="消息类型">
          <el-radio-group v-model="data.callback.config.type">
            <el-radio label="success" border>成功</el-radio >
            <el-radio label="info" border>消息</el-radio>
            <el-radio label="warning" border>警告</el-radio>
            <el-radio label="error" border>错误</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="消息标题">
          <el-input v-model="data.callback.config.title" placeholder="请输入消息标题"></el-input>
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input v-model="data.callback.config.content" placeholder="请输入消息内容"></el-input>
        </el-form-item>
        <el-form-item class="label-margin">
          <div>确定按钮文字</div>
          <el-input class="content-margin" v-model="data.callback.config.confirm" placeholder="请输入消息框确定文字"></el-input>
        </el-form-item>
        <el-form-item  class="label-margin">
          <div>取消按钮文字</div>
          <el-input class="content-margin" v-model="data.callback.config.cancel" placeholder="请输入消息取消框文字"></el-input>
        </el-form-item>
        <el-form-item class="label-margin">
          <div>成功提示消息类型</div>
          <el-radio-group class="content-margin" v-model="data.callback.config.confirmTips.type">
            <el-radio label="success" border>成功</el-radio >
            <el-radio label="info" border>消息</el-radio>
            <el-radio label="warning" border>警告</el-radio>
            <el-radio label="error" border>错误</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="label-margin">
          <div>成功提示消息</div>
          <el-input class="content-margin" v-model="data.callback.config.confirmTips.message" placeholder="请输入成功提示文字"></el-input>
        </el-form-item>
        <el-form-item class="label-margin">
          <div>取消提示消息类型</div>
          <el-radio-group class="content-margin" v-model="data.callback.config.cancelTips.type">
            <el-radio label="success" border>成功</el-radio >
            <el-radio label="info" border>消息</el-radio>
            <el-radio label="warning" border>警告</el-radio>
            <el-radio label="error" border>错误</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="label-margin">
          <div>取消提示消息</div>
          <el-input class="content-margin" v-model="data.callback.config.cancelTips.message" placeholder="请输入取消提示文字"></el-input>
        </el-form-item>
      </template>


      <!-- 交互模块框 -->
      <template v-if="data.callback.type == 'alert'">
        <div>引入弹出框拼接组件</div>
      </template>

      <!-- 异步交互 -->
      <template v-if="data.callback.type == 'alert'">
        <el-form-item label="API接口"></el-form-item>
        <el-form-item label="接口参数"></el-form-item>
      </template>

      <!-- 直接跳转 -->
      <template v-if="data.callback.type == 'alert'">
        
      </template>


      <el-button size="mini" type="danger" style="width:100%;margin-bottom: 20px">删除操作</el-button>



    </div>
    <el-button size="mini" type="primary" style="width:100%;">添加操作</el-button>

  </div>
</template>
<script type="text/javascript">
// import empty from './empty.vue'
export default {
  props: {
    value: [Object, Array],
  },
  components: {
    //empty
  },
  data() {
    return {
       action:{
        label:'',
        type:'',
       }
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {

  }
}

</script>
<style type="text/css" lang="scss">
.table-attrbute-action {
  padding: 10px;

  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }

  .el-form-item__label {
    text-align: right;
  }

  .el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
  }

  .el-form-item__label,
  .el-form-item__content {
    font-size: 12px !important;
  }
  .el-radio{
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left: 0px;
  }

  ._action-type{
    .el-radio--mini.is-bordered{
      margin: 0px;
      margin-bottom: 5px;
      display: block;
    }
  }

  .label-margin{
    .el-form-item__content{
      margin-left: 0px !important;
      padding-left: 5px;
      color:#606266;
      .content-margin{
        width: calc(100% - 40px);
        margin-left: 40px;

      }
    }
  }

}

</style>
